<!DOCTYPE html>
<html lang="en">
<head>
    <title>出勤天数配置</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
    <!--日历-->
    <link rel="stylesheet" href="/dist/css/page/calendar.css">
    <style type="text/css">
        .leftFilter {
            float: left;
            text-align: left;
            margin-right: 5px;
        }

        .table input {
            width: 100%;
            border: 0px;
        }

        a {
            cursor: pointer;
        }
        .content {
            padding: 8px 8px 0 8px;
        }

    </style>
</head>
<body>
<section class="content" id="app">
    <div hidden style="text-align:right;padding-bottom: 10px;">
        <select v-model="year" class="form-control select2 companySelect"
                style="width: 150px; float: left"
                @change="yearChange($event)">
            <option value="2017">2017年</option>
            <option value="2018">2018年</option>
            <option value="2019">2019年</option>
            <option value="2020">2020年</option>
            <option value="2021">2021年</option>
            <option value="2022">2022年</option>
        </select>
    </div>
    <h4 style="width:100%;text-align: center">{{nowYear+'年 配置一览表'}}</h4>
    <div class="box-body no-padding" style="margin-top: 10px;">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th width="8%" class="tableTitle">岗位</th>
                <th width="7%" class="tableTitle">1月</th>
                <th width="7%" class="tableTitle">2月</th>
                <th width="7%" class="tableTitle">3月</th>
                <th width="7%" class="tableTitle">4月</th>
                <th width="7%" class="tableTitle">5月</th>
                <th width="7%" class="tableTitle">6月</th>
                <th width="7%" class="tableTitle">7月</th>
                <th width="7%" class="tableTitle">8月</th>
                <th width="7%" class="tableTitle">9月</th>
                <th width="7%" class="tableTitle">10月</th>
                <th width="7%" class="tableTitle">11月</th>
                <th width="7%" class="tableTitle">12月</th>

            </tr>
            </thead>
            <tr>
                <td>
                    一线岗位
                </td>
                <td>
                    {{frontJob.monthOne}}
                </td>
                <td>
                    {{frontJob.monthTwo}}
                </td>
                <td>
                    {{frontJob.monthThree}}
                </td>
                <td>
                    {{frontJob.monthFour}}
                </td>
                <td>
                    {{frontJob.monthFive}}
                </td>
                <td>
                    {{frontJob.monthSix}}
                </td>
                <td>
                    {{frontJob.monthSeven}}
                </td>
                <td>
                    {{frontJob.monthEight}}
                </td>
                <td>
                    {{frontJob.monthNine}}
                </td>
                <td>
                    {{frontJob.monthTen}}
                </td>
                <td>
                    {{frontJob.monthEleven}}
                </td>
                <td>
                    {{frontJob.monthTwelve}}
                </td>
            </tr>
            <tr>
                <td>
                    后台岗位
                </td>
                <td>
                    {{normalJob.monthOne}}
                </td>
                <td>
                    {{normalJob.monthTwo}}
                </td>
                <td>
                    {{normalJob.monthThree}}
                </td>
                <td>
                    {{normalJob.monthFour}}
                </td>
                <td>
                    {{normalJob.monthFive}}
                </td>
                <td>
                    {{normalJob.monthSix}}
                </td>
                <td>
                    {{normalJob.monthSeven}}
                </td>
                <td>
                    {{normalJob.monthEight}}
                </td>
                <td>
                    {{normalJob.monthNine}}
                </td>
                <td>
                    {{normalJob.monthTen}}
                </td>
                <td>
                    {{normalJob.monthEleven}}
                </td>
                <td>
                    {{normalJob.monthTwelve}}
                </td>
            </tr>
        </table>
    </div>

    <h4 style="width:100%;text-align: left;margin-top: 25px">配置工作日、休息日</h4>
    <!--日期应出勤配置-->
    <div style="text-align:right;padding-bottom: 10px;margin-top: 10px">
        <select v-model="frontType" class="form-control select2 companySelect"
                style="width: 150px; float: left"
                @change="roleChange($event)">
            <option value="0">后台岗位</option>
            <option value="1">一线岗位</option>
        </select>

    </div>

    <!--图例-->
    <div style="display:inline-block;margin-left: 180px">
        <div style="display: inline-block;width:18px; height:18px;border: solid 1px #99BBE8">
            &nbsp;
        </div>
        <div style="display: inline-block">工作日&nbsp;&nbsp;</div>
        <div style="display: inline-block;margin-left:10px;width:18px; height:18px;background-color:#cfdff0;border: solid 1px #99BBE8">
            &nbsp;
        </div>
        <div style="display: inline-block">今日&nbsp;&nbsp;</div>
        <div style="display: inline-block;margin-left:10px;width:18px; height:18px;background-color:#f9cc9d;border: solid 1px #99BBE8">
            &nbsp;
        </div>
        <div style="display: inline-block">标记休息日&nbsp;&nbsp;</div>
    </div>

    <!--日历表-->
    <div class="main">
        <div class="pathBar" style="margin-bottom:2px;">
            <div class="pathBarPos"></div>
        </div>
        <div id="myrl" style="width:600px;height: auto; overflow:hidden;">
            <form name=CLD>
                <table class="biao" width="100%" id="huiyi8">
                    <tbody>
                    <tr>
                        <td class="calTit" colSpan=7
                            style="height:40px;padding-top:3px;text-align:center;">
                            <a href="#" title="上一年" id="nianjian" class="ymNaviBtn lsArrow"></a>
                            <a href="#" title="上一月" id="yuejian" class="ymNaviBtn lArrow"></a>
                            <div style="float: left;margin-left: 150px">
                                <span id="dateSelectionRili" class="dateSelectionRili"
                                      style="cursor:hand;color: white; border-bottom: 1px solid white;"
                                      onclick="dateSelection.show()">
                                    <span id="nian" class="topDateFont"></span>
                                    <span class="topDateFont">年</span>
                                    <span id="yue" class="topDateFont"></span>
                                    <span class="topDateFont">月</span>
                                    <span class="dateSelectionBtn cal_next"
                                          onclick="dateSelection.show()">▼</span>
                                </span> &nbsp;&nbsp;<font id=GZ class="topDateFont"></font>
                            </div>
                            <!--新加导航功能-->
                            <div style="left: 150px;margin-top: 10px; display: none;"
                                 id="dateSelectionDiv">
                                <div id="dateSelectionHeader"></div>
                                <div id="dateSelectionBody">
                                    <div id="yearList">
                                        <div id="yearListPrev"
                                             onclick="dateSelection.prevYearPage()">&lt;
                                        </div>
                                        <div id="yearListContent"></div>
                                        <div id="yearListNext"
                                             onclick="dateSelection.nextYearPage()">&gt;
                                        </div>
                                    </div>
                                    <div id="dateSeparator"></div>
                                    <div id="monthList">
                                        <div id="monthListContent">
                                            <span id="SM0" class="month"
                                                  onclick="dateSelection.setMonth(0)">1</span>
                                            <span id="SM1" class="month"
                                                  onclick="dateSelection.setMonth(1)">2</span>
                                            <span id="SM2" class="month"
                                                  onclick="dateSelection.setMonth(2)">3</span>
                                            <span id="SM3" class="month"
                                                  onclick="dateSelection.setMonth(3)">4</span>
                                            <span id="SM4" class="month"
                                                  onclick="dateSelection.setMonth(4)">5</span>
                                            <span id="SM5" class="month"
                                                  onclick="dateSelection.setMonth(5)">6</span
                                            ><span id="SM6" class="month"
                                                   onclick="dateSelection.setMonth(6)">7</span>
                                            <span id="SM7" class="month"
                                                  onclick="dateSelection.setMonth(7)">8</span>
                                            <span id="SM8" class="month"
                                                  onclick="dateSelection.setMonth(8)">9</span>
                                            <span id="SM9" class="month"
                                                  onclick="dateSelection.setMonth(9)">10</span>
                                            <span id="SM10" class="month"
                                                  onclick="dateSelection.setMonth(10)">11</span>
                                            <span id="SM11" class="month curr"
                                                  onclick="dateSelection.setMonth(11)">12</span>
                                        </div>
                                        <div style="clear:both;"></div>
                                    </div>
                                    <div id="dateSelectionBtn">
                                        <div id="dateSelectionTodayBtn"
                                             onclick="dateSelection.goToday()">今天
                                        </div>
                                        <div id="dateSelectionOkBtn" onclick="dateSelection.go()">
                                            确定
                                        </div>
                                        <div id="dateSelectionCancelBtn"
                                             onclick="dateSelection.hide()">取消
                                        </div>
                                    </div>
                                </div>
                                <div id="dateSelectionFooter"></div>
                            </div>
                            <a href="#" id="nianjia" title="下一年" class="ymNaviBtn rsArrow"
                               style="float:right;"></a>
                            <a href="#" id="yuejia" title="下一月"
                               class="ymNaviBtn rArrow"
                               style="float:right;"></a>
                        </td>
                    </tr>

                    <tr class="calWeekTit" style="font-size:12px; height:30px;text-align:center;">
                        <td width="100px" class="red">星期日</td>
                        <td width="100px">星期一</td>
                        <td width="100px">星期二</td>
                        <td width="100px">星期三</td>
                        <td width="100px">星期四</td>
                        <td width="100px">星期五</td>
                        <td width="100px" class="red">星期六</td>
                    </tr>
                    <!--日历内容-->
                    <template v-for="i in 6">
                        <tr align=center height="50px" id="tt">
                            <template v-for="j in 7">
                                <td :id="getGenerateId('GD',(i-1)*7+(j-1))" on="0">
                                    <font :id="getGenerateId('SD',(i-1)*7+(j-1))"
                                          style="font-size: 18px;"
                                          :color="(j==1 || j==7) ? 'red':'black'"
                                          face="Arial" TITLE=""></font>
                                    <br>
                                    <font :id="getGenerateId('LD',(i-1)*7+(j-1))" size=2
                                          style="font-size:12px;white-space:nowrap;overflow:hidden;cursor:default;"> </font>
                                </td>
                            </template>
                        </tr>
                    </template>
                    </tbody>
                </table>
                </table>
            </form>
        </div>
    </div>

    <!--操作按钮-->
    <div class="south"
         style="height:50px;line-height:50px;margin-top:15px;margin-left:200px;text-align:center;">
        <input type="button" style="margin-left:20px;height: auto"
               :value="'保存 '+nowMonth+' 月份配置'" class="btn btn-primary btn-sm oaBtn" @click="submit()"/>
        <input type="button" style="margin-left:20px;height: auto"
               value="重置已选" class="btn btn-primary btn-sm oaBtn" @click="reset()"/>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--日历-->
<script type="text/javascript" src="/dist/js/pages/system/calendar.js"></script>


<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            frontType: 0,//0-后台岗位 1-一线销售
            gNum: 0,//日期
            nowMonth: tM + 1,
            nowYear: tY,
            frontJob: {
                frontFlag: "1",
                monthOne: "",
                monthTwo: "",
                monthThree: "",
                monthFour: "",
                monthFive: "",
                monthSix: "",
                monthSeven: "",
                monthEight: "",
                monthNine: "",
                monthTen: "",
                monthEleven: "",
                monthTwelve: "",
                shouldDate: "",
                createUserId: getCurrentUser().id,
                year: "",
            },
            normalJob: {
                frontFlag: "0",
                monthOne: "",
                monthTwo: "",
                monthThree: "",
                monthFour: "",
                monthFive: "",
                monthSix: "",
                monthSeven: "",
                monthEight: "",
                monthNine: "",
                monthTen: "",
                monthEleven: "",
                monthTwelve: "",
                shouldDate: "",
                createUserId: getCurrentUser().id,
                year: "",
            },
            year: "",
            currentUserId: getCurrentUser().id
        },
        methods: {
            getGenerateId: function (prefix, index) {
                return prefix + index
            },
            submit: function () {
                if (hDays == "") {
                    alert("没有选中任何日期！");
                }
                else {
                    var that = this;
                    var m = parseInt(global.currMonth) + 1
                    this.nowMonth = m
                    var mm = ""
                    if (m < 10 && m > 0) {
                        mm = "0" + m
                    } else {
                        mm = m
                    }
                    var data = {
                        chooseDates: hDays.toString(),
                        frontType: that.frontType,
                        nowMonth: that.nowYear + "-" + mm,
                        userId: getCurrentUser().id
                    };
                    $.wyui.postMethod("/shouldHoliday/config.json", data, function (data) {
                        alert("保存成功！");
                        //只刷新一览表
                        that.getYearTable()
                    });
                }
            },
            reset: function () {
                $("#huiyi8 td").removeClass("selday").attr("on", 0);
                hDays = [];
            },
            frontSave: function () {
                var that = this;
                that.frontJob.year = that.year;
                $.wyui.postMethod(urlConfig.system.shouldSignIn.save, that.frontJob, function (data) {
                    alert("保存成功！");
                });
            },
            getSignMonthList: function (year) {
                //setTitleYearAndMonth()
                //转化月份 4 为 04
                var m = parseInt(global.currMonth) + 1
                this.nowMonth = m

                var mm = ""
                if (m < 10 && m > 0) {
                    mm = "0" + m
                }
                //请求数据用2018-04  year-mm
                var that = this;
                var param = {
                    year: year.toString(),
                    month: mm,
                    frontType: this.frontType
                }
                $.wyui.postMethod(urlConfig.system.shouldSignIn.getShouldSignMonthList, param, function (data) {
                    var json = data
                    //绘制4月份表格使用2018-3
                    drawCld(year, m - 1, json)
                });
            },

            getList: function (year) {
                var that = this
                if (year == undefined) {
                    var json = []
                    initCalendar(json)
                } else {
                    this.getSignMonthList(year)
                }
                this.getYearTable()
            },
            getYearTable: function () {
                var that = this;
                $.wyui.postMethod("/shouldHoliday/getShouldSignInList.json", {
                    year: that.year
                }, function (data) {
                    console.log(data);
                    that.frontJob.monthOne = "";
                    that.frontJob.monthTwo = "";
                    that.frontJob.monthThree = "";
                    that.frontJob.monthFour = "";
                    that.frontJob.monthFive = "";
                    that.frontJob.monthSix = "";
                    that.frontJob.monthSeven = "";
                    that.frontJob.monthEight = "";
                    that.frontJob.monthNine = "";
                    that.frontJob.monthTen = "";
                    that.frontJob.monthEleven = "";
                    that.frontJob.monthTwelve = "";
                    that.normalJob.monthOne = "";
                    that.normalJob.monthTwo = "";
                    that.normalJob.monthThree = "";
                    that.normalJob.monthFour = "";
                    that.normalJob.monthFive = "";
                    that.normalJob.monthSix = "";
                    that.normalJob.monthSeven = "";
                    that.normalJob.monthEight = "";
                    that.normalJob.monthNine = "";
                    that.normalJob.monthTen = "";
                    that.normalJob.monthEleven = "";
                    that.normalJob.monthTwelve = "";

                    for (var i = 0; i < data.length; i++) {
                        var month = data[i].shouldDate.substring(5, 7);
                        if (data[i].frontFlag == "1") {
                            //一线岗位
                            if (month == "01") {
                                that.frontJob.monthOne = data[i].shouldSignIn;
                            } else if (month == "02") {
                                that.frontJob.monthTwo = data[i].shouldSignIn;
                            } else if (month == "03") {
                                that.frontJob.monthThree = data[i].shouldSignIn;
                            } else if (month == "04") {
                                that.frontJob.monthFour = data[i].shouldSignIn;
                            } else if (month == "05") {
                                that.frontJob.monthFive = data[i].shouldSignIn;
                            } else if (month == "06") {
                                that.frontJob.monthSix = data[i].shouldSignIn;
                            } else if (month == "07") {
                                that.frontJob.monthSeven = data[i].shouldSignIn;
                            } else if (month == "08") {
                                that.frontJob.monthEight = data[i].shouldSignIn;
                            } else if (month == "09") {
                                that.frontJob.monthNine = data[i].shouldSignIn;
                            } else if (month == "10") {
                                that.frontJob.monthTen = data[i].shouldSignIn;
                            } else if (month == "11") {
                                that.frontJob.monthEleven = data[i].shouldSignIn;
                            } else if (month == "12") {
                                that.frontJob.monthTwelve = data[i].shouldSignIn;
                            }
                        } else if (data[i].frontFlag == "0") {
                            //后台岗位
                            if (month == "01") {
                                that.normalJob.monthOne = data[i].shouldSignIn;
                            } else if (month == "02") {
                                that.normalJob.monthTwo = data[i].shouldSignIn;
                            } else if (month == "03") {
                                that.normalJob.monthThree = data[i].shouldSignIn;
                            } else if (month == "04") {
                                that.normalJob.monthFour = data[i].shouldSignIn;
                            } else if (month == "05") {
                                that.normalJob.monthFive = data[i].shouldSignIn;
                            } else if (month == "06") {
                                that.normalJob.monthSix = data[i].shouldSignIn;
                            } else if (month == "07") {
                                that.normalJob.monthSeven = data[i].shouldSignIn;
                            } else if (month == "08") {
                                that.normalJob.monthEight = data[i].shouldSignIn;
                            } else if (month == "09") {
                                that.normalJob.monthNine = data[i].shouldSignIn;
                            } else if (month == "10") {
                                that.normalJob.monthTen = data[i].shouldSignIn;
                            } else if (month == "11") {
                                that.normalJob.monthEleven = data[i].shouldSignIn;
                            } else if (month == "12") {
                                that.normalJob.monthTwelve = data[i].shouldSignIn;
                            }
                        }
                    }
                });
            },
            yearChange: function (e) {
                var that = this;
                that.year = e.target.value;
                that.getList();
            },
            roleChange: function (e) {
                var that = this;
                that.frontType = e.target.value;
                that.getList();
            }
        },
        mounted: function () {
            var that = this;
            //今天的日期
            var year = new Date().getFullYear();
            global.currMonth = new Date().getMonth();//3
            that.year = year;
            that.getList();//防止一进来点月份报错,多执行一次
            that.getList(year);
        }
    });


</script>

</body>
</html>